<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">添加运单</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-card class="AddTag-box-card">
                <h2 class="Regi-title">添加运单</h2>
                <el-form :model="AddOrderForm" ref="form" label-width="100px" size="medium">
                    <el-form-item label="发货单号 :">
                        <el-input v-model="AddOrderForm.order" placeholder="输入运单号"> </el-input>
                        <el-button type="primary" @click="SuiJiFixName" size="mini">随机生成</el-button>
                    </el-form-item>
                    <el-form-item label="客户信息 :">
                        <el-select v-model="AddOrderForm.customer" placeholder="选择用户">
                            <a href="/add_customer" class="Add_user">
                                <el-option value="创建新客户" class="A-option"></el-option>
                            </a>
                            <el-option v-for="cust in CustList" :key="cust.id" :value="cust.cname">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="text-align:center;">
                        <el-button type="primary" @click="AddOrder" style="width:200px;">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import { customer_info_get, sui_order_get, add_order_post } from '../axios_api/api'
import { config, formatXml } from '../../config'
export default {
    data() {
        return {
            // 添加标签信息
            AddOrderForm: {
                order: '',
                customer: '',
            },
            // 客户列表
            CustList: [],
        }
    },
    mounted() {
        this.get_customer();
    },
    methods: {
        // 生成随机运单号
        SuiJiFixName() {
            sui_order_get().then(resp => {
                if (resp.code === 200) {
                    this.AddOrderForm.order = resp.order
                    this.$message.success(resp.message)
                }
            })
        },
        // 添加标签
        AddOrder() {
            for (let j = 0; j < this.CustList.length; j++) {
                if (this.AddOrderForm.customer === this.CustList[j].cname) {
                    this.AddOrderForm.customer = this.CustList[j].id
                }
            }
            add_order_post(this.AddOrderForm).then(resp => {
                if (resp.code === 200) {
										this.$message.success(resp.message)
                    this.$router.push('/order_list')
                }
            })
        },
        // 获取客户列表
        get_customer() {
            customer_info_get().then(resp => {
                if (resp.code === 200) {
                    this.CustList = resp.custlist
                    console.log(this.CustList)
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.Add_user {
    text-decoration: none;
    :link {
        color: red;
        text-decoration: none;
    }
    :visited {
        color: red;
        text-decoration: none;
    }
    :hover {
        color: red;
        text-decoration: none;
    }
    :active {
        color: red;
        text-decoration: none;
    }
    .A-option {
        color: red;
        font-size: 12px;
    }
}
.el-select {
    width: 260px;
}
</style>